<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>宝贝投-P2P平台->运营后台</title>
<!-- links begin -->
<link rel="shortcut icon" href="../favicon.ico" />
<link rel="stylesheet" href="../js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="../css/core.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="../css/account.css" />

<script type="text/javascript" src="../js/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" src="../js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../js/jquery.bootstrap.js"></script>
<!-- links end -->
<script type="text/javascript" src="../js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="../js/plugins/jquery.twbsPagination.min.js"></script>
<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js" ></script>
<script type="text/javascript" src="../js/common.js"></script>
</head>
<body>
	<div class="container">
		<!-- 网页顶部 begin -->
		<div class="mgr-header"></div>
		<!-- 网页顶部 end -->

		<div class="row">
			<!--左侧菜单栏 begin -->
			<div class="mgr-leftmenu col-sm-3"></div>
			<!--左侧菜单栏 end -->
			<div class="col-sm-9">
				<div class="page-header">
					<h3>充值审核</h3>
				</div>
				<form id="searchForm" class="form-inline" method="post" action="http://localhost:8080/system/recharge/query">
					<div class="form-group">
						<label>充值时间:</label>
						<input type="text" id="beginDate" name="beginDate" class="form-control" style="cursor: pointer; background:#fff;" readonly="true" autocomplete="off" value='' />
					</div>
					<div class="form-group">
						<label>&emsp;至&emsp;</label>
						<input type="text" id="endDate" name="endDate" class="form-control" style="cursor: pointer; background:#fff;" readonly="true" autocomplete="off" value='' />
					</div>
					<div class="form-group">
						<label>&emsp;状态:</label>
						<select class="form-control" id="state" name="state">
							<option value="-1">全部</option>
							<option value="1">审核中</option>
							<option value="2">审核通过</option>
							<option value="0">审核拒绝</option>
						</select>
					</div>
					<div class="form-group">
						&emsp;
						<button id="query" class="btn btn-success">
							<i class="icon-search"></i>
							查询
						</button>
					</div>
				</form>
				<div class="panel panel-default" style="margin-top: 20px;">
					<table id="tblRecharge" class="table table-striped">
						<thead>
							<tr>
								<th>交易号</th>
								<th>交易时间</th>
								<th>用户名</th>
								<th>金额</th>
								<th>状态</th>
								<th></th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
					<div id="divPagination" style="text-align: center;">
						<ul id="pagination" class="pagination"></ul>
					</div>
				</div>
			</div>
		</div>

		<!-- '充值审核' 模态窗口 -->
		<div class="modal fade" id="rechargeAuditModal" tabindex="-1" role="dialog">
		  <div class="modal-dialog modal-lg" role="document">
		    <div class="modal-content">
		      <div class="modal-body">
		      	<form class="form-horizontal" id="editform" method="post" action="http://localhost:8080/system/recharge/audit">
					<fieldset>
						<div id="legend" class="">
							<legend>充值审核</legend>
						</div>
						<input type="hidden" id="id" name="id" value="" />
						<input type="hidden" name="state" value="" />
						<div class="form-group">
				        	<label class="col-sm-2 control-label">用户名</label>
				        	<div class="col-sm-6">
								<p id="username" class="form-control-static">加载中...</p>
				        	</div>
			        	</div>
			        	<div class="form-group">
				        	<label class="col-sm-2 control-label">交易号</label>
				        	<div class="col-sm-6">
								<p id="tradeNo" class="form-control-static">加载中...</p>
				        	</div>
			        	</div>
			        	<div class="form-group">
				        	<label class="col-sm-2 control-label">充值金额</label>
				        	<div class="col-sm-6">
								<p id="amount" class="form-control-static">加载中...</p>
				        	</div>
			        	</div>
			        	<div class="form-group">
				        	<label class="col-sm-2 control-label">充值时间</label>
				        	<div class="col-sm-6">
								<p id="rechargeTime" class="form-control-static">加载中...</p>
				        	</div>
			        	</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">充值说明</label>
				        	<div class="col-sm-6">
								<p id="remark" class="form-control-static">加载中...</p>
				        	</div>
						</div>
					</fieldset>
				</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button id="btnAuditPass" type="button" class="btn btn-success">审核通过</button>
		        <button id="btnAuditReject" type="button" class="btn btn-warning">审核拒绝</button>
		      </div>
		    </div>
		  </div>
		</div>
	</div>
</body>
<script type="text/javascript">

// '充值信息'列表
let rechargeList = new Array();

// 查询条件对象
let queryObject = new Object();

// 判断用户是否已经登录
let jsonUser = sessionStorage.getItem("admin");
if(!jsonUser) window.location.href = 'login.html';

// 如果用户已经登录，则解析出user对象
let user = JSON.parse(jsonUser);

$(function() {
    // 加载公共顶部模板
    $('.mgr-header').load('tpl-head.html');

    // 加载左侧菜单栏模板
    $('.mgr-leftmenu').load('tpl-leftmenu.html');

    // 时间日期组件
    $("#beginDate").click(function(){
        WdatePicker();
    });

    $("#endDate").click(function(){
        WdatePicker();
    });

    // 初始化查询时间

    // 开始时间(最近30天)
    let beginDate = new Date();
    beginDate.setDate(beginDate.getDate() - 30);

    // 结束时间(今天)
    let endDate = new Date();

    $("#beginDate").val(beginDate.Format('yyyy-MM-dd'));
    $("#endDate").val(endDate.Format('yyyy-MM-dd'));


    // 注册'查询'按钮事件
    $("#query").click(function(){

        // 获取查询数据
        let beginDate = $("#beginDate").val();
        let endDate = $("#endDate").val();
        let state = $("#state").val();

        // 封装查询请求数据
        queryObject.beginDate = beginDate + ' 00:00:00';
        queryObject.endDate = endDate + ' 23:59:59';
        queryObject.state = state;
        queryObject.currentPage  = 1;

        // 加载'充值记录'数据
        loadRecharge();

        return false;

    });//$("#query").click();


	// '审核通过'按钮注册事件
    $("#btnAuditPass").click(function(){

        // 设置'审核状态' value值
        // 设置'审核状态' value值
        $('#rechargeAuditModal [name="state"]').val(RECHARGE_STATE_CONST.PASS);

        // 隐藏'充值审核' 模态窗
        $('#rechargeAuditModal').modal('hide');

        // 进行'充值审核' 表单的ajax提交
        $("#editform").ajaxSubmit(function(result){

            // 如果返回的数据的响应码不是'成功(200)'
            if(result.code != 200) {
                $.messager.alert(result.msg);
                return;
            }

            // 如果返回的响应码为'成功(200)'
            $.messager.alert('操作成功！');

            // 加载'充值审核'数据
            loadRecharge();

        });// $("#editform").ajaxSubmit();

        return false;
    });// $("#btnAuditPass").click();


    // '审核拒绝'按钮注册事件
    $("#btnAuditReject").click(function(){

        // 设置'审核状态' value值
        $('#rechargeAuditModal [name="state"]').val(RECHARGE_STATE_CONST.REJECT);

        // 隐藏'充值审核' 模态窗
        $('#rechargeAuditModal').modal('hide');

        // 进行'充值审核' 表单的ajax提交
        $("#editform").ajaxSubmit(function(result){

            // 如果返回的数据的响应码不是'成功(200)'
            if(result.code != 200) {
                $.messager.alert(result.msg);
                return;
            }

            // 如果返回的响应码为'成功(200)'
            $.messager.alert('操作成功！');

            // 加载'充值审核'数据
            loadRecharge();

        });// $("#editform").ajaxSubmit();

        return false;
    });// $("#btnAuditReject").click();

    // 加载'充值记录'数据
    loadRecharge();

});// $(function());

/** 加载'充值记录'数据 **/
function loadRecharge(){

    // 加载'充值记录'数据
    $.post('http://localhost:8080/system/recharge/query', queryObject, function (result) {

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            $.messager.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        let pageResult = result.data;

        // 将分页集合赋值给全局变量
        rechargeList = pageResult.listData;

        // 填充表格数据
        fillRechargeTable( pageResult.listData );

        // 初始化分页插件
        $("#pagination").remove();
        $("#divPagination").append('<ul id="pagination" class="pagination"></ul>');

        $("#pagination").twbsPagination({
            totalPages: pageResult.totalPage,
            visiblePages: 10,
            startPage: pageResult.currentPage,
            first: '首页',
            last: '最后一页',
            prev: '上一页',
            next: '下一页',
            onPageClick:function( event, page ){
                // 加载指定页码数据
                queryObject.currentPage = page;
                loadRecharge();

            }// onPageClick();

        });// $("#pagination").twbsPagination();

    });// $.post();


}// loadRecharge();

/** 填充表格数据 **/
function fillRechargeTable( listData ) {

    // 清空表格数据
    $('#tblRecharge tbody').empty();

    // 如果没有集合数据，就直接返回
    if( !listData || listData.length == 0 ){
        // 设置没有数据提示
        $('#tblRecharge tbody').html('<tr><td colspan="6" align="center"><p class="text-danger">暂时没有充值申请</p></td></tr>');
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < listData.length; i++ ) {

        let recharge = listData[i];

        let tdTradeNo = '<td>' + recharge.tradeNo + '</td>';
        let tdRechargeTime = '<td>' + recharge.rechargeTime + '</td>';
        let tdUsername = '<td>' + recharge.username + '</td>';

        // 充值金额
        let amount = recharge.amount / MONEY_UNIT;
        let tdAmount = '<td>' + amount + '元</td>';

        // 充值审核状态
        let state = RECHARGE_STATE[recharge.state];
        let tdState = '<td>' + state + '</td>';

        // '审核'按钮
        let tdEdit = '<td></td>';

        // 如果审核状态是'审核中'，就构建1个可以点击的'审核'按钮
		if( recharge.state == RECHARGE_STATE_CONST.PENDING )
            tdEdit = '<td><a href="javascript:showRechargeAuditModal(\'' + recharge.id + '\');">审核</td></td>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblRecharge tbody').append('<tr>' + tdTradeNo + tdRechargeTime + tdUsername + tdAmount + tdState + tdEdit + '</tr>');

    }// for();

}// fillRechargeTable( var listData );

/** 弹出'充值审核' 模态窗 **/
function showRechargeAuditModal( id ){

    let recharge;

    // 遍历'充值信息'集合，找到匹配的id
    for( let i = 0; i < rechargeList.length; i++ ){

        let tmpObj = rechargeList[i];

        if( tmpObj.id == id ){
            recharge = tmpObj;
            break;
        }

    }// for();


    // 将找到的匹配数据填充到'编辑'表单上
    $('#id').val(recharge.id);
    $('#username').text(recharge.username);
    $('#tradeNo').text(recharge.tradeNo);
    $('#amount').text(recharge.amount / MONEY_UNIT + '元');
    $('#rechargeTime').text(recharge.rechargeTime);
    $('#remark').text(recharge.remark);

    // '编码'框不可编辑
    $('#code').val(recharge.code);

    // 显示'充值审核'编辑窗口
    $("#rechargeAuditModal").modal("show");

    return false;

}// showRechargeAuditModal();
</script>
</html>